<script setup lang="ts" name="CCParentPage_VModel">
import { ref } from "vue";
import CyrusInput from "./CyrusInput.vue";
import CyrusInput1 from "./CyrusInput1.vue";

const username = ref("cyrus");
const isEditing = ref<boolean>(false);
</script>

<template>
  <!--
  <input v-model="username" /> 的本质是：

  <input
    :value="username"
    @input="username = (<HTMLInputElement>$event.target).value"
  />
  -->
  <div class="bg-sky-100 p-6">
    <div v-if="isEditing">
      <CyrusInput v-model="username" />
      <!-- 
        <CyrusInput v-model="username" /> 的本质是：
      
        <CyrusInput
        :modelValue="username"
        @update:modelValue="username = $event"
      />
      -->
      <button
        class="ml-2 border text-xs px-1 py-0.5 bg-green-50"
        @click="isEditing = false"
      >
        好
      </button>
    </div>
    <div v-else>
      {{ username }}
      <button
        class="ml-2 border text-xs px-1 py-0.5 bg-gray-50"
        @click="isEditing = true"
      >
        改
      </button>
    </div>
    <!-- 自定义modelValue的名字 -->
    <CyrusInput1 v-model:foo="username" />
  </div>
</template>
